Vue.component('rx-input', {
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        /**
         * 表达式以'.'分隔,如 inputType.inputBeforeText,.inputAfterText,.defVal.
         */
        formatExpression: {
            type: String,
            default: 'text...',
        },
        value: [String, Number, Boolean],
        showFn: {
            type: Boolean,
            default: true,
        },
        size: {
            type: Number,
            default: 5,
        },
    },
    data: function () {
        return {
            valArr: [],
        }
    },
    computed: {
        innerValue: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('change', val)
            },
        },
        beforeArr() {
            return this.valArr[1].split(',');
        },
        afterArr() {
            return this.valArr[2].split(',');
        },
        defVal() {
            return this.valArr[3].split(',');
        },
        inputClass() {
            return this.valArr[0] == 'text' ? 'lineinput' : '';
        },
        type() {
            return this.valArr[0] == '' ? 'text' : this.valArr[0];
        },
    },
    methods: {
        initValArr() {
            this.valArr = this.formatExpression.split('.');
        },
    },
    template:
        `
    <div style="display:inline" v-if="showFn" >
      <template v-if="defVal.length > 1 ">
          <template v-for="(af,index) in afterArr">
            {{beforeArr[index]}}
            <input :type="type" :size="size" :class="inputClass" v-model="innerValue" :value="defVal[index]"/>
            {{af}}
          </template>
      </template>
      
      <template v-else>
        {{beforeArr[0]}}
        <input :type="type" :size="size" :class="inputClass" v-model="innerValue" :value="defVal[0]"/>
        {{afterArr[0]}}
      </template>
    </div>
    `,
    created: function () {
        this.initValArr();
    },
})